import styled from 'styled-components'
import { primaryColor, smallSize, middleSize, largeSize } from './style/variables'

// 这里调用了div方法
export const AppWrapper = styled.div`
  .footer {
    border: 1px solid #f1f1f1;
    font-size: ${largeSize};
    color: ${primaryColor};
  }
`

export const SectionWrapper = styled.div.attrs(props => ({
  // 设置默认值
  // tbackgroundcolor: props.backgroundColor || '#eee'
}))`
  padding: 10px;
  cursor: pointer;
  .title {
    /* 使用js中的变量 */
    color: ${props => props.color};
    font-size: ${props => props.size}px;
    background-color: ${props => props.backgroundColor || '#eee'};
  }
  .content {
    border: 1px solid #333;
  }
`
